<template>
	
	<div class="edit-pane">
		<div class="edit-pane-header">
			<span>对象设置</span>
			<div>
				<el-button type="primary" :icon="FolderAdd" style="border: none;" @click="addFolder" />
			</div>
		</div>
		<div class="edit-pane-content">
			<el-tree-v2 :data="TreeNodes" :props="props" :height="850" @node-contextmenu="openContextmenu" @node-click="closeContextmenu">
			  <template #default="{ node }" >
			    <span> {{ node.label }}</span> 
				<div class="edit-tree-node">
					<span v-show="node.key.lastIndexOf('Layer')==-1">定位</span>
					<span>可视</span>
				</div>
			  </template>
			</el-tree-v2>
		</div>
		
		<div class="node-menu" v-show="isOpenMenu"  :style="{ left: position.left + 'px', top: position.top + 'px' }">
			<ul>
				<li @click="copyNode"> 复制</li>
				<li @click="renameNode">重命名</li>
				<li  @click="deleteNode">删除</li>
				<li @click="settingNodeSytle">样式设置</li>
			</ul>
		</div>
		
		<NodeRename ref="nodeRenameRef"></NodeRename>
	</div>
</template>
<script lang="ts" setup>
	
	import {
	  FolderAdd
	} from '@element-plus/icons-vue'
	
	import { LoadTree,addLayer,listForLayer } from "@/api/scene";
	
	import NodeRename from "./nodeRename/NodeRename.vue"
	
	
	import { reactive, ref } from 'vue'
	
	const nodeRenameRef = ref(Object)
	const dialogFormVisible = ref(false)
	
	
	const props = {
	  value: 'id',
	  label: 'label',
	  children: 'children',
	}
	const TreeNodes = ref([])
	const isOpenMenu = ref(false)
	const position = ref({
		left:0,
		top:0
	})
	
	let curNode;
	
	const GetTree=()=>{
		LoadTree({
			"pid":"-1",
			"sceneid":""
		})
		.then((res) => {
			if(res.code==200){
				TreeNodes.value=res.result
				console.log(res.result)
			}else{
				ElMessage.error(res.message || '系统出错');
			}
		})
		.catch((e) => {
		})
		.finally(() => {
		});
	}
	
	const addFolder=()=>{
		addLayer({
			"pid":"-1",
			"sceneid":""
		})
		.then((res) => {
			if(res.code==200){
				TreeNodes.value=res.result
				console.log(res.result)
			}else{
				ElMessage.error(res.message || '系统出错');
			}
		})
		.catch((e) => {
		})
		.finally(() => {
		});
	}
	
	const openContextmenu=(e,node)=>{
		  isOpenMenu.value = true
		  position.value.top = e.pageY-32
		  position.value.left = e.pageX
		  curNode=node
	}
	
	const closeContextmenu=(e,node)=>{
		  isOpenMenu.value = false
		  curNode=null;
	}
	
	const copyNode=(e,node)=>{
		  isOpenMenu.value = false
		  curNode=null;
	}
	
	const renameNode=(e,node)=>{
		  isOpenMenu.value = false
		  nodeRenameRef.value.show(true);
		  curNode=null;
	}
	
	const deleteNode=(e,node)=>{
		  isOpenMenu.value = false
		  curNode=null;
	}
	
	const settingNodeSytle=(e,node)=>{
		  isOpenMenu.value = false
		  curNode=null;
	}
	
	
	onMounted(() => {
		GetTree();
	});
	
</script>

<style scoped>
	.prefix {
	  color: var(--el-color-primary);
	  margin-right: 10px;
	}
	.prefix.is-leaf {
	  color: var(--el-color-success);
	}
	
	.el-tree {
	    background: #2b2c2f;
		 color: #ccc;
	}
	.edit-tree-node{
		float: right;position: absolute;right:0px;padding-right: 10px;
		>span{
			padding: 0.3125rem;
		}
	}
	
	.edit-tree-node-icon{
		height: 15px;
		width: 15px;
		>img{
			height: 15px;
			width: 15px;
			font-weight: bold;
		}
	}
	.el-tree-node__expand-icon {
	    cursor: pointer;
	    color: #ccc;
	}
	
	
	/deep/ .el-tree-node:focus>.el-tree-node__content {
	    background-color:#2b2c2f;
	}
	/deep/ .el-tree-node__content:hover {
	    background-color:#2b2c2f;
	}
	
	.edit-pane{
		flex:1;
		background-color: #2b2c2f;
		height: 100%;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: column;
		flex-direction: column;
		>.edit-pane-header{
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-pack: justify;
			-ms-flex-pack: justify;
			justify-content: space-between;
			-webkit-box-align: center;
			-ms-flex-align: center;
			align-items: center;
			width: 100%;
			height: 34px;
			background-color: #36373a;
			border-bottom: 1px solid #18181b;
			border-top: 1px solid #515664;
			color: #ccc;
			font-size: 14px;
			>span{
				border-left-width: 3px!important;
				padding-left: 8px!important;
				height: 16px;
				line-height: 17px;
				font-size: 13px;
				color: #ccc;
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
				white-space: nowrap;
				border-left: 2px solid #0080ff;
				margin-left: 8px;
				padding-left: 3px;
			}
			>div{
				float: right;
				margin-top: -1px;
				>button{
				   width: 1.4375rem;
				   height: 1.875rem;
				   margin-right: 0.3125rem;
				   background: transparent;
				   color: #ccc;
				}
			}
		}
 		>.edit-pane-content{
			flex: 1;
			height: 100%;
		} 
	}
	
	.node-menu{
		position: absolute;
		top: 290px;
		left: 955px;
		/* transform-origin: center top; */
		z-index: 2114;
		/* 2px solid #2b2c2f */
		>ul{
			margin-top: 0!important;
			padding: 0;
			background: #2b2c2f;
			border: 1px solid #201f1f;
			color: #ccc;
			font-size: 0.8125rem;
			>li{
				list-style: none;
				color: #ccc;
				line-height: 30px;
				padding-left: 10px;
				padding-right: 10px;
				border-left: 2px solid #2b2c2f;
				cursor: pointer;
			}
		}
	}

/deep/ .el-color-picker__trigger {
    height: 26px;
    width: 26px;
	border: 0px solid #4d505d;
}	
	
/deep/ .el-select {
   width:  17.125rem;
}	
/deep/ .el-input-number--small {
	width:  17.125rem;
	line-height: 22px;
	height: 24.5px;
}

/deep/.el-select .el-input.is-focus .el-input__wrapper {
	box-shadow:none;
}

/deep/ .el-input-number.is-controls-right .el-input__wrapper {
	background: transparent;
	padding-left: 15px;
	padding-right: 42px;
	border-radius: 0px;
	color: #ccc;
}

/deep/ .el-input-number.is-controls-right .el-input-number__increase {
    border-radius: 0 ;
}
/deep/.el-input-number.is-controls-right .el-input-number__decrease {
    border-radius: 0;
}

/deep/ .el-input__inner {
    color: #ccc;
	outline-style: none ;
}

/deep/.el-input__wrapper {
    box-shadow: none;
	background-color: #4d505d; 
	border: 0px solid #4d505d;
}

/deep/ .el-input-number__decrease, .el-input-number__increase {
	background:transparent;
	color: #ccc;
}

/deep/ .el-input-number__increase {
	background:transparent;
	color: #ccc;
}

/deep/.el-input-number__increase {
	border-left:1px solid #4d505d; 
	border-bottom:1px solid#4d505d;
    border-radius: 0;
}

/deep/.el-input-number__decrease {
    border-radius: 0;
	border-top:1px solid #4d505d; 
	border-left:1px solid #4d505d; 
	border-bottom:1px solid#4d505d;
}

/deep/ .el-input-number.is-controls-right .el-input-number__decrease {
  border-left:1px solid #4d505d; 
}
/deep/ .el-input-number.is-controls-right .el-input-number__increase {
	border-bottom:1px solid#4d505d;
}

	
</style>
